<template>
	<div class="commodity_main">
		<div class="search-wrap">
			<div class="searchbar clear">
				<img src="../assets/image/ico_seach@2x.png" class="search-icon fl"/>
				<input type="text" :placeholder="searchText" class="search-text fl" v-model="keyWord" @keyup.13="show($event)">
			</div>
		</div>
		<nav class="navbar clear">
			<div class="nav-item fl"><a href="javascript:;" @click='tabToggle("typeA");' v-bind:class="{active : (type == 'typeA')}"><span>销量</span></a></div>
			<div class="nav-item fl"><a href="javascript:;" @click='tabToggle("typeB");' v-bind:class="{active : (type == 'typeB')}"><span>新品</span></a></div>
			<div class="nav-item fl"><a href="javascript:;" @click='tabToggle("typeC");' v-bind:class="{active : (type == 'typeC')}"><span>价格</span><div class="price-icon"><i class="up"></i><i class="down"></i></div></a></div>
		</nav>
		<div class="nav-container">
			<ul class="nav-container-list fix" v-if="type == 'typeA'">{{searchList.itemList}}
				<li class="productbar" v-if="searchList.itemList.length > 0" v-for="item in searchList.itemList">
					<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
						<img :src="item.imageUrl" class="product-img"/>
						<p class="product-name">{{item.goodsName}}</p>
						<p class="product-price">{{item.shopPrice}}</p>
					</router-link>
				</li>
				<div v-else>
					
				</div>
			</ul>
			<ul class="nav-container-list" v-if="type == 'typeB'">
				<li class="productbar" v-for="item in searchList.itemList">
					<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
						<img :src="item.imageUrl" class="product-img"/>
						<p class="product-name">{{item.goodsName}}</p>
						<p class="product-price">{{item.shopPrice}}</p>
					</router-link>
				</li>
			</ul>
			<ul class="nav-container-list" v-if="type == 'typeC'">
				<li class="productbar" v-for="item in searchList.itemList">
					<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
						<img :src="item.imageUrl" class="product-img"/>
						<p class="product-name">{{item.goodsName}}</p>
						<p class="product-price">{{item.shopPrice}}</p>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
export default {
	data () {
		return {
			searchText:'请输入搜索关键词',
			type : 'typeA',
			searchList: '',
			userId: '',
			keyWord: '',
			page: '',
		}
	},
	name: 'app',
	mounted:function () {
		this.$nextTick(function () {
			this.getLocalStorage();
			this.searchView();
		})
	},
	methods:{
		tabToggle:function(tabText){
			this.type= tabText;
		},
		getLocalStorage:function () {
			this.userId = (window.localStorage.getItem('userId') || []);
			this.keyWord = (window.localStorage.getItem('keyWord') || []);
			this.page = (window.localStorage.getItem('page') || []);
		},
		searchView:function () {
			var _this = this;
			// 搜索关键字
			this.$http.post(Util.ajaxPath.devSearchUrl+"shop-solr/sr/account/searchPage",{userId: this.userId, keyWord: this.keyWord, page: this.page}).then(function (res) {
				_this.searchList = res.body.content;
			});
		},
		show:function(ev){
			if(ev.keyCode == 13){
				// alert('你按回车键了');
				var _this = this;
				// 搜索关键字
				this.$http.post(Util.ajaxPath.devSearchUrl+"shop-solr/sr/account/searchPage",{userId: this.userId, keyWord: this.keyWord, page: this.page}).then(function (res) {
					_this.searchList = res.body.content;
				});
			}
		}
	}
}
</script>
<style lang="scss">
.commodity_main{
	.search-wrap{ padding: 0.14rem 0.3rem; background: #f4f5f5; position: fixed; left: 0; top: 0; z-index: 10; }
	.searchbar{
		width:6.9rem; height:0.6rem; border-radius: 29px; background: #fff;
		.search-icon{ display:block; width:0.28rem; height:0.28rem; padding:0.16rem 0.11rem 0 0.21rem;}
		.search-text{ display:block; width:4.5rem; height:0.28rem; margin-top:0.19rem; border:0; outline:none; font-size:0.22rem; line-height:0.28rem; background:#fff;}
		::-webkit-input-placeholder{color:#aaa; font-size: 0.22rem; line-height:0.22rem; text-align:left;}
	}
	.navbar{
		width:100%; height:0.7rem; background:#fff; position: fixed; left: 0; top: 0.88rem; z-index: 10;
		.nav-item{
			width:calc(100%/3); position:relative;
			a{display:block; width:0.58rem; height:0.68rem; margin:0 auto; }
			span{display:block; width:0.58rem; height:0.68rem; font-size:0.28rem; line-height:0.7rem; text-align:center; color:#333;}
		}
		.price-icon{
			width:0.1rem; height:0.2rem; position:absolute; top:0.23rem; right:0.7rem;
			.up{ display:block; width: 0; height: 0; border-left: 0.06rem solid transparent; border-right: 0.06rem solid transparent; border-bottom: 0.1rem solid #aaa;}
			.down{ display:block; margin-top:0.06rem; width: 0; height: 0; border-left: 0.06rem solid transparent; border-right: 0.06rem solid transparent; border-top: 0.1rem solid #ff365d;}
		}
		.active{
			span{border-bottom:0.02rem solid #ff365d; color:#ff365d;}
		}
	}
	.nav-container-list{
		width:100%; position: absolute; left: 0; top: 1.58rem;
		.productbar{
			float:left; width:3.3rem; height:5.4rem; margin:0.3rem 0.15rem 0 0.15rem; background:#fff;
			.product-img{display:block; width:100%; height:3.3rem;}
			.product-name{margin:0.3rem 0.3rem 0.44rem 0.3rem; width:2.7rem; height:0.8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size:0.22rem; text-align:left; line-height:0.4rem; color:#3e3e3e;}
			.product-price{margin:0 0.3rem; font-size:0.24rem; font-weight:bold; text-align:left; line-height:0.24rem; color:#ff365d;}
		}
	}
}
</style>